<template>
  <div class="toast">
    <i :class="getClass"></i>
    <span>{{ toastMSG }}</span>
  </div>
</template>
 <script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      toastMSG: (state) => state.showToast.toastMSG,
      toastType: (state) => state.showToast.toastType,
    }),
    getClass() {
      if (this.toastType == "success") {
        return "iconfont icon-toast_chenggong";
      } else if (this.toastType == "error") {
        return "iconfont icon-toast-shibai_huaban";
      } else if (this.toastType == "warning") {
        return "iconfont icon-toast-jinggao";
      }
    },
  },
};
// 封装Toast组件步骤
// 1．创建Toast.vue 实现基本布局。 - App . vue中调用显示。
// 2.通过vuex状态控制Toast组件显示隐藏-v-show。
// 3.通过vuex中mutations方法改变状态。
// 一（手机号测试）
// 4．封装提示框内容(提示信息,提示类型）
// -修改mutations方法,更新数据
// 5. actions中使用定时器自动关闭提示框
// 6．增加过渡效果 - transition组件
// 面试时:你封装过什么组件吗?
// 1. Toast.vue 实现基本布局
// 2．封装共享数据(显示隐藏,提示内容,提示类型）vuex
// 3．实现自动关闭功能 actions
// 4．增加过渡效果 transition组件
</script>

<style lang = "less" scoped>
.toast {
  position: fixed;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border-radius: 10px;

  .iconfont {
    margin-right: 10px;
  }

  .icon-toast-shibai_huaban {
    color: red;
  }

  .icon-toast_chenggong {
    color: green;
  }

  .icon-toast-jinggao {
    color: orange;
  }
}
</style>

